<body>
	<div class="container minh">
		<ol class="breadcrumb">
			<li class="breadcrumb-item">用户管理</li>
			<li class="breadcrumb-item active">用户列表</li>
		</ol>

		<div class="card my-3 py-2">
			<div class="form-inline" role="form">
				<div class="form-group px-2">
					<label for="qname" class="mx-1">用户名称</label> <input id="qname" name="username" class="form-control" type="text" placeholder="请输入用户名">
				</div>

				<div class="form-group px-2">
					<label for="qct" class="mx-1">创建时间</label> <input id="qct" name="createTime" data-provide="datepicker" class="form-control datepicker" type="text" placeholder="请输入创建时间">
				</div>

				<div class="form-group px-2">
					<label for="qpwd" class="mx-1">用户类型</label> <select id="qtype" class="form-control">
						<option name="type" value="">类型选择</option>
						<option name="type" value="PORTAL">门户</option>
						<option name="type" value="CONSOLE">后台</option>
					</select>
				</div>

				<button onclick="serachUser()" type="button" class="btn btn-primary ml-1">查询</button>
			</div>
		</div>

		<table id="user" class="table table-striped table-bordered" style="width: 100%;">
			<thead>
				<tr>
					<th>编号</th>
					<th>登录名称</th>
					<th>用户名称</th>
					<th>用户类型</th>
					<th>用户状态</th>
					<th>创建时间</th>
					<th>更新时间</th>
					<th>操作</th>
				</tr>
			</thead>
		</table>
	</div>
	</div>
	<script type="text/javascript">
		var url = "vendor/datatables/zh_CN.json";
		$(document).ready(function() {
	        $(".datepicker").datepicker({
	            language: "zh-CN",
	            autoclose: true, //选中之后自动隐藏日期选择框
	            clearBtn: true,  //清除按钮
	            todayHighlight:true,
	            format: "yyyy-mm-dd"//日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
	        });
		var table = $('#user').dataTable(
						{
							"text-align" : 'center',
							"autoWidth" : true,
							"searching" : false,
							"processing" : true,
							"serverSide" : true,
							"ordering" : false,
							"dataSrc" : "",
							"language" : {
								url : url
							},
							"ajax" : {
								"url" : 'console/systemUsers.json',
								"type" : "POST",
								"data" : function(d) {
									var param = {};
									param.draw = d.draw;
									param.start = d.start;
									param.length = d.length;
									param.cname = $("#qname").val();
									param.createTime = $("#qct").val();
									param.type = $("#qtype").val()
									return param;
								}
							},
							"columns" : [
									{
										"data" : "id"
									},
									{
										"data" : "username"
									},
									{
										"data" : "cname"
									},
									{
										"data" : "type",
										"render" : function(data, type,row, meta) {
											if (data == "PORTAL") {
												data = "<span style='color:blue'>门户</span>";
											} else {
												data = "<span style='color:red'>后台</span>";
											}
											return data;
										}
									},
									{
										"data" : "status",
										"render" : function(
												data, type,
												row, meta) {
											if (data == "VALID") {
												data = "<span style='color:blue'>有效</span>";
											} else {
												data = "<span style='color:red'>无效</span>";
											}
											return data;
										}
									},
									{
										"data" : "createTime",
										"render" : function(
												data, type,
												row, meta) {
											//时间格式化
											return moment(
													data)
													.format(
															"YYYY-MM-DD HH:mm:ss");
										}
									},
									{
										"data" : "updateTime",
										"render" : function(
												data, type,
												row, meta) {
											//时间格式化
											return moment(
													data)
													.format(
															"YYYY-MM-DD HH:mm:ss");
										}
									},
									{
										"data" : "id",
										//http://datatables.club/manual/daily/2016/04/25/option-columns-render1.html
										"render" : function(data, type,row, meta) {
											if (row.status == "ACTIVE") {
												return data = '<button id="freezeUser" class="btn btn-danger btn-sm" data-id='+data+'>冻结</button>';
											} else {
												return data = '<button id="unFreezeUser" class="btn btn-info btn-sm" data-id='+data+'>解冻</button>';
											}
										}
									} ]
						});
						});

		/**
		 * 单行冻结按钮点击事件响应
		 */
		$(document).delegate('#freezeUser', 'click', function() {
			$("#freezeSubmit").val($(this).data("id"));
			$("#freezeOneModal").modal('show');
		});

		/**
		 * 点击确认冻结按钮
		 */
		$(document).delegate('#freezeSubmit', 'click', function() {
			var id = $(this).val();
			$('#freezeOneModal').modal('hide');
			$.ajax({
				url : "console/freezeUser/" + id,
				async : true,
				type : "POST",
				dataType : "json",
				cache : false,
				success : function(data) {
					if (data.resultCode == "SUCCESS") {
						$('#user').DataTable().ajax.reload();
					} else {
						alert("冻结失败");
					}
				},
				error : function(data) {
					alert("请求异常");
				}
			});
		});

		/**
		 * 单行解冻按钮点击事件响应
		 */
		$(document).delegate('#unFreezeUser', 'click', function() {
			$("#unFreezeSubmit").val($(this).data("id"));
			$("#unFreezeOneModal").modal('show');
		});

		/**
		 * 点击确认冻结按钮
		 */
		$(document).delegate('#unFreezeSubmit', 'click', function() {
			var id = $(this).val();
			$('#unFreezeOneModal').modal('hide');
			$.ajax({
				url : "console/unFreezeUser/" + id,
				async : true,
				type : "POST",
				dataType : "json",
				cache : false,
				success : function(data) {
					if (data.resultCode == "SUCCESS") {
						$('#user').DataTable().ajax.reload();
					} else {
						alert("解冻失败");
					}
				},
				error : function(data) {
					alert("请求异常");
				}
			});
		});

		function serachUser() {
			$('#user').DataTable().draw();
		}
	</script>

	<div class="modal fade" id="freezeOneModal">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<h6 class="modal-title">冻结确认</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">您确定要冻结当前用户吗？</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="freezeSubmit">确认</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="unFreezeOneModal">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<h6 class="modal-title">解冻确认</h6>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
				<div class="modal-body">您确定要解冻当前用户吗？</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" id="unFreezeSubmit">确认</button>
				</div>
			</div>
		</div>
	</div>
</body>
